<script setup>
import { ref,reactive,computed,watch,watchEffect } from "vue";

import { ElMessage } from 'element-plus'
const url =
  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
const srcList = [
  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
  'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
  'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
  'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
  'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
  'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
  'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
]
const props=defineProps({
	item:{
		type:Object,
		default:{
		title:"1",
		ms:"2",
		link:"3",
		url:  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
		srcList:[
			'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
			'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
			'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
			'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
			'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
			'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
			'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
		]
	}
	}
		
	
})
console.log("props.item:",props);
function openLink(e){
	const url=props.item.link
	if(/^http/.test(url)){
		window.open(url)
	}else{
		copy(url)
	}
}
function copy(url){
	var input = document.createElement("input"); // 创建input对象
	input.value = url; // 设置复制内容
	document.body.appendChild(input); // 添加临时实例
	input.select(); // 选择实例内容
	document.execCommand("Copy"); // 执行复制
	document.body.removeChild(input); // 删除临时实例
	ElMessage({
		message: '复制路径成功',
		type: 'success',
	})

	// console.log("document.execCommand('Copy'):",document.execCommand('Copy'));
	// if(document.execCommand('Copy')){
	// 	document.execCommand('Copy')
	// 	ElMessage({
	// 		message: '复制成功',
	// 		type: 'success',
	// 	})
	// }else{
	// 	ElMessage.error('复制失败')
	// }
}
</script>


<template>
<div class="box">
	<el-image class="image"
      :src="props.item.url"
      :preview-src-list="props.item.srcList"
      fit="cover"
    />
	<div class="text" @click="openLink">
		<div class="title">{{props.item.title}}</div>
		<div class="ms">{{props.item.ms}}</div>
	</div>
</div>
</template>


<style scoped>
:deep(.el-image){
	width: 8em ;
	height: 8em ;
}
.box{    
	padding: 10px;
    display: flex;
    flex-direction: row;
    width: 20em;
    height: 8em;
    background: #fff;
    color: #000;
	margin: 1em;
}
.text{
	width:calc( 100% - 8em ) ;
	margin-left: 10px;
	display: flex;
	flex-direction: column;
	height:	 100%;
}
.title{
	font-size: 14px;
	font-weight: bold;
	height: 2em;
}
.ms{
	color: rgb(78, 78, 78);
	font-size: 12px;
	height: calc( 100% - 2.5em);
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-line-clamp: 6; 
	display: -webkit-box;    /*弹性伸缩盒子*/
	-webkit-box-orient: vertical;
}
</style>